<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>科盾清朗 2018-2019 年会</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <style type="text/css">
        html,body{margin:0;padding:0;text-align:center;overflow:hidden;width:100%;height:100%}*{box-sizing:border-box}.section{width:100%;font-size:24px;overflow:hidden;position:relative}.section .title{line-height:100px;font-size:24px}#fullpage{visibility:hidden}.powered{font-size:20px;color:#454545;margin-top:20px}.section-main{position:absolute;top:50%;margin-top:-150px;width:100%;text-align:center}a{text-decoration:none}#demo0{width:160px;overflow:hidden;border:1px solid #ccc;text-indent:10px;margin:0 auto}#demo0 ul{list-style:none;padding:0;margin:0;width:100%;text-align:left}#demo0 li{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px}#demo1{height:210px;width:220px;margin:0 auto;text-align:center}
    </style>
    <style>
        *{box-sizing:border-box}.progress{width:100%;font-size:0;white-space:nowrap;position:fixed;bottom:0;height:4px;background-color:#ccc}.progress-items{width:100%;z-index:2;height:4px;position:absolute}.progress-rate{width:0;z-index:1;position:absolute;height:4px;background-color:#00abeb;transition:all .5s ease}
    </style>
    <script type="text/javascript">
        (function(){

            // 动态设置meta标签的方法倍数
            let scale = 1 / devicePixelRatio;
            //document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
             // 动态设置根节点的字体大小
            function getSize(){
                let html = document.documentElement || document.getElementsByTagName('html')[0];
                let htmlWidth = html.clientWidth;
                let fontSize = htmlWidth/15;
                html.style.fontSize = fontSize + 'px';

                return fontSize;
            }
            getSize();
            window.addEventListener('resize',getSize);
      })();
    </script>
    <link href="asset/animate.min.css" rel="stylesheet" />

    <!-- 自定义样式 -->
    <link href="css/kedun.css" rel="stylesheet" />
    <link href="css/kedun-1.css" rel="stylesheet" />
    <link href="css/kedun-2.css" rel="stylesheet" />
</head>
<body>

    <!-- fullpage -->
    <div id="fullpage" class="site__header">


        <!-- 第一屏 首页 -->
        <div class="section section-1">
            <!-- <div class="section-main">
                <div class="title animated" data-delay="100" data-show="flipInY"  data-hide="flipOutY" >Powerful Features</div>
                <div data-delay="400"  class="animated" data-show="zoomIn"  data-hide="zoomOut"><img src="asset/power.png"></div>
            </div> -->
            <div class="section-box section-box-1 animated" data-show="fadeIn" data-hide="fadeOut">
                
                <!-- 上面花 -->
                <section class="s1-flower-top">
                    <img src="./images/1/floor-left.png" class="s1-flower-tl animated" data-delay="100"  data-show="rotateInDownRight" data-hide="fadeOut"/>
                    <img src="./images/1/floor-right.png" class="s1-flower-tr animated" data-delay="100" data-show="rotateInDownLeft" data-hide="fadeOut"/>
                </section>

                <!-- 中间圆 -->
                <section class="s1-circle-center ">
                    
                    <div class="s1-circle animated" data-delay="100" data-show="zoomIn" data-hide="zoomOut">
                        <div class="s1-circle-inner"></div>
                    </div>
                    
                    <img src="./images/1/yqh.png" class="s1-title-1 animated" data-delay="550" data-show="fadeInDown" />
                    <img src="./images/1/e.png" class="s1-title-2 animated" data-delay="550" data-show="fadeInUp" />
                    <span class="s1-line animated" data-delay="550" data-show="zoomIn"></span>
                    <img src="./images/1/e-text.png" class="s1-title-3 animated" data-delay="550" data-show="fadeInLeft"/>
                    <img src="./images/1/nianhui.png" class="s1-title-4 animated" data-delay="550" data-show="fadeInRight"/>
                    <img src="./images/1/gd-sz.png" class="s1-title-5 animated" data-delay="550" data-show="fadeInDown"/>
                    <img src="./images/1/date.png" class="s1-title-6 animated" data-delay="650" data-show="fadeInDown"/>

                </section> 
                
                <!-- 下面花 -->
                <section class="s1-flower-bottom">
                    <img src="./images/1/floor-lb.png" class="s1-flower-bl animated" data-delay="100"  data-show="rotateInDownRight" data-hide="rotateOutDownRight"/>
                    <img src="./images/1/floor-rb.png" class="s1-flower-br animated" data-delay="100"  data-show="rotateInDownLeft" data-hide="rotateOutDownLeft"/>
                </section>
                
            </div>
        </div>



        <!-- 第二屏 -->
        <div class="section">
            <div class="section-main" style= "margin-top: -206px;">
                <div class="title animated"    data-delay="100" data-show="flipInY"  data-hide="flipOutY" >Rotation 3D Demo↓</div>
                <div id = "demo1" ><img id="demo-img" src="asset/atLogo.png"></div>
            </div>
        </div>

        <!-- 第三屏 -->
        <div class="section">
            <div class="section-main">
                <div class="title animated"    data-delay="100" data-show="lightSpeedIn"  data-hide="lightSpeedOut" >Physical Feedback</div>
                <div class="animated" data-delay="500" data-show="flipInX"  data-hide="flipOutX"><img src="asset/physics.png"></div>
            </div> 
        </div>

        <!-- 第四屏 -->
        <div class="section">
            <div class="section-main">
                <div class="title animated"  data-delay="100" data-show="flipInY"  data-hide="flipOutY">Smooth Motion</div>
                <div class="animated" data-delay="500" data-show="rotateIn"  data-hide="rotateOut"><img src="asset/speed.png"></div>
            </div>  
        </div>

        <!-- 第五屏 -->
        <div class="section">
            <div class="section-main">
                <div class="title animated"  data-delay="100" data-show="rollIn"  data-hide="rollOut">Simple API</div>
                <div class="animated" data-delay="500" data-show="rotateIn"  data-hide="rotateOut"><img src="asset/simple.png"></div>
            </div>  
        </div>

        <!-- 第六屏 -->
        <div class="section">
            <div class="section-main">
                <div class="title animated"  data-delay="100" data-show="flipInY"  data-hide="flipOutY">Excellent Contributors</div>
                <div class="animated" data-delay="500" data-show="flipInY"  data-hide="flipOutY"><img src="asset/contributors.png"></div>
                <div class="animated powered" data-delay="900" data-show="bounceIn"  data-hide="bounceOut"> powered by <a href="https://github.com/AlloyTeam/AlloyTouch">AlloyTouch</a> FullPage Plugin and animate.css</div>
            </div> 
        </div>


    </div>


    <!-- 底部进度条 -->
    <div id="progress" class="progress">
        <div class="progress-rate"></div>
        <div class="progress-items"></div>
    </div>
    
    <!-- 脚本 -->
    <script src="./js/transform.js"></script>
    <script src="./js/alloy_touch.js"></script>
    <script src="./js/alloy_touch.full_page.js"></script>
    <script src="./js/progress_bar.js"></script>
    
    <!-- 自定以脚本 -->
    <script type="text/javascript" src="./js/kedun-1.js"></script>
    <script type="text/javascript" src="./js/kedun-2.js"></script>

    <!-- 全屏滚动函数 -->
    <script>
        
        var pb;
        var fp =  new AlloyTouch.FullPage("#fullpage",{
            animationEnd: function () {

            },
            leavePage: function (index) {
               console.log("leave" + index)
            },
            beginToPage: function (index) {
               console.log("to" + index);
               pb.to(index / (this.length-1));
            }
        });
        pb = new ProgressBar("#progress",fp.length-1)

    </script>

</body>